<div>
  <style>
    body {
      margin: 0px;
      color: blue;
    }
  </style>
        <canvas id="ad"></canvas>
    <script>

function scrollToBottom() {
  var selectBox = document.getElementById('code');
  selectBox.scrollTop = selectBox.scrollHeight;

  var selectBox_1 = document.getElementById('code_1');
  selectBox_1.scrollTop = selectBox_1.scrollHeight;
}

      var xhr = new XMLHttpRequest();
      xhr.open('GET' , './js/system.js' , true);
      xhr.send();
      xhr.onload = function() {
        var split = xhr.responseText;
        var dom = document.getElementById('code');
        dom.style.color = '#00FF00';
        var i = 0;
        setInterval(function() {
          if (i + 1 == split.length) {
            i = 0;
          }
          else {
            if (split[i] === ' ') {
              i++;
              dom.innerHTML += '<a>&nbsp;</a>';
              return;
            }
            // innerText 中将空格换成真实空格
            dom.innerText += split[i];
            scrollToBottom();
            i++;
          }
        } , 5);
        setInterval(function() {
          dom.innerText = dom.innerText.substring(dom.innerText.length /3)
        }, 5000);
      }
    </script>
    <style>
      .a::-webkit-scrollbar {
          display: none; /* 对于基于WebKit的浏览器 */
      }
      .a::-webkit-scrollbar {
          display: none; /* 对于基于WebKit的浏览器 */
      }
      
    </style>
     <div class="a" style="overflow-y: auto;color: #00FF00;font-weight: bold;width: 100%;bottom: 0;top: 0;position: absolute;opacity: 0.4;;background-image: url(./img/green-back.jpg);background-repeat: no-repeat;background-size: cover;">
      <div class="a" id="code" style="padding: 10px;overflow-y: auto;height: 100vh;width: calc(100% - 20px);float: left;"></div>
      <div class="a" id="code_1" style="padding: 10px;overflow-y: auto;height: 100vh;width: calc(50% - 20px);float: right;"></div>
    </div>
</div>
